<template>
  <a-drawer 
    v-model:visible="vdata.visible" 
    :destroyOnClose="true" 
    :title="'统计明细'" 
    :body-style="{ paddingBottom: '80px' }" 
    width="80%"
    @close="onClose"
  >
    <a-tabs v-model:activeKey="vdata.activeKey" :size="'large'">
      <a-tab-pane key="1" tab="门店统计">
        <accountDetailPane :method="'store'" :tableColumns="tableStoreColumns" :mchNo="vdata.mchNo" :date="vdata.date" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="支付方式统计">
        <accountDetailPane :method="'wayCode'" :tableColumns="tableWayCodeColumns" :mchNo="vdata.mchNo" :date="vdata.date" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="通道统计">
        <accountDetailPane :method="'wayCodeType'" :tableColumns="tableChannelColumns" :mchNo="vdata.mchNo" :date="vdata.date" />
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import accountDetailPane from './accountDetailPane.vue'
const vdata: any = reactive({
  visible: false,
  mchNo: '',
  activeKey: '1',
  date: ''
})
// 门店表头
let tableStoreColumns = reactive([
  { key: 'storeName', title: '门店名称', dataIndex: 'storeName', },
  { key: 'storeId', title: '门店ID', dataIndex: 'storeId', },
  { key: 'allAmount', title: '成交金额', tooltipTitle: '支付成功的订单金额，包含部分退款及全额退款的订单', dataIndex: 'allAmount', },
  { key: 'payAmount', title: '实收金额', tooltipTitle: '扣除手续费后的实际到账金额', dataIndex: 'payAmount', },
  { key: 'fee', title: '手续费', tooltipTitle: '成交订单产生的手续费金额' , dataIndex: 'fee', },
  { key: 'refundAmount', title: '退款金额', dataIndex: 'refundAmount', },
  { key: 'refundFee', title: '手续费回退', tooltipTitle: '退款订单产生的手续费退费金额' , dataIndex: 'refundFee', },
  { key: 'refundCount', title: '退款笔数', tooltipTitle: '实际退款订单笔数，若一笔已成交订单退款多次，则计多次', dataIndex: 'refundCount', },
  { key: 'payCount', title: '成交/总笔数', dataIndex: 'payCount', },
  { key: 'round', title: '成功率', tooltipTitle: '成交笔数与总订单笔数除得的百分比', dataIndex: 'round', },
])
// 支付方式表头
let tableWayCodeColumns = reactive([
  { key: 'wayCode', title: '支付代码', dataIndex: 'wayCode', },
  { key: 'wayName', title: '支付名称', dataIndex: 'wayName', },
  { key: 'allAmount', title: '成交金额', tooltipTitle: '支付成功的订单金额，包含部分退款及全额退款的订单', dataIndex: 'allAmount', },
  { key: 'payAmount', title: '实收金额', tooltipTitle: '扣除手续费后的实际到账金额', dataIndex: 'payAmount', },
  { key: 'refundAmount', title: '退款金额', dataIndex: 'refundAmount', },
  { key: 'refundCount', title: '退款笔数', tooltipTitle: '实际退款订单笔数，若一笔已成交订单退款多次，则计多次', dataIndex: 'refundCount', },
  { key: 'payCount', title: '成交/总笔数', dataIndex: 'payCount', },
  { key: 'round', title: '成功率', tooltipTitle: '成交笔数与总订单笔数除得的百分比', dataIndex: 'round', },
])
// 支付类型（渠道）表头
let tableChannelColumns = reactive([
  { key: 'wayType', title: '支付渠道', dataIndex: 'wayType', },
  { key: 'wayTypeName', title: '渠道名称', },
  { key: 'allAmount', title: '成交金额', tooltipTitle: '支付成功的订单金额，包含部分退款及全额退款的订单', dataIndex: 'allAmount', },
  { key: 'payAmount', title: '实收金额', tooltipTitle: '扣除手续费后的实际到账金额', dataIndex: 'payAmount', },
  { key: 'refundAmount', title: '退款金额', dataIndex: 'refundAmount', },
  { key: 'refundCount', title: '退款笔数', tooltipTitle: '实际退款订单笔数，若一笔已成交订单退款多次，则计多次', dataIndex: 'refundCount', },
  { key: 'payCount', title: '成交/总笔数', dataIndex: 'payCount', },
  { key: 'round', title: '成功率', tooltipTitle: '成交笔数与总订单笔数除得的百分比', dataIndex: 'round', },
])

function show(recordId, date) { // 弹层打开事件
  vdata.activeKey = '1'
  vdata.visible = true
  vdata.mchNo = recordId
  vdata.date = date
}

function onClose() {
  vdata.visible = false
}

defineExpose({
  show //抛出show函数给父组件
})
</script>
